<script setup>
import { ref } from 'vue'
import CertiyList from './CertiyList.vue'
import LogList from './LogList.vue'
import PasswordDialog from './PasswordDialog.vue'
import PhoneDialog from './PhoneDialog.vue'
import EmailDialog from './EmailDialog.vue'

const isShowDialog = ref(false)
const passwordHandle = () => {
    isShowDialog.value = true 
}
const closeDialog = (val) => {
    isShowDialog.value = val
}

const isShowEmailDialog = ref(false)
const emailHandle = () => {
    isShowEmailDialog.value = true
}
const closeEmailDialog = (val) => {
    isShowEmailDialog.value = val
}

const isShowPhoneDialog = ref(false)
const phoneHandle = () => {
    isShowPhoneDialog.value = true
}
const closePhoneDialog = (val) => {
    isShowPhoneDialog.value = val
}

const isShowCertDialog = ref(false)
const pageShow = ref(true)
const certShow = ref(false)
const logShow = ref(false)
const logListHandle = () => {
    pageShow.value = false
    logShow.value = true
}
const certListHandle = () => {
    isShowCertDialog.value = true
    pageShow.value = false
    certShow.value = true
}

const updatePageShow = (val) => {
    pageShow.value = val
}
const updateLogShow = (val) => {
    logShow.value = val
}
const updateCertShow = (val) => {
    certShow.value = val
}




</script>
<template>
    <div class="bs-panel" v-if="pageShow">
        <div class="bs-panel-body">
            <div class="page-title bold">账户安全</div>
            <div class="safe-body">
                <div class="safe-item">
                    <div class="safe-label">实名认证：</div>
                    <div class="safe-value">
                        <span>崔*强</span>
                    </div>
                    <el-link type="primary" @click="certListHandle">认证</el-link>
                </div>
                <div class="safe-item">
                    <div class="safe-label">登录密码：</div>
                    <div class="safe-value">
                        <span>已设置</span>
                    </div>
                    <el-link type="primary" @click="passwordHandle">修改</el-link>
                </div>
                <div class="safe-item">
                    <div class="safe-label">账户邮箱：</div>
                    <div class="safe-value">
                        <span>未设置</span>
                    </div>
                    <el-link type="primary" @click="emailHandle">修改</el-link>
                </div>
                <div class="safe-item">
                    <div class="safe-label">绑定手机：</div>
                    <div class="safe-value">
                        <span>176****1247</span>
                    </div>
                    <el-link type="primary" @click="phoneHandle">设置</el-link>
                </div>
                <div class="safe-item">
                    <div class="safe-label">上次登录：</div>
                    <div class="safe-value">
                        <span>2024-12-05  广东省深圳市</span>
                    </div>
                    <el-link type="primary" @click="logListHandle">更多</el-link>
                </div>
                <!-- 提示 -->
                <div class="safe-tip">
                    <div class="safe-tip-title">
                        <img src="@/assets/images/tip.png" alt="">
                        <span>温馨提示：</span>
                    </div>
                    <div class="safe-tip-content">
                        <p>首次的个人或企业认证将自动作为账号的实名认证，不可修改。</p>
                        <p>后续添加的认证信息可用于设置域名模板信息。</p>
                        <p>请确保提供的信息准确无误，以避免认证延误或失败。您的个人和企业信息将严格保密，仅用于认证和服务提供。如有疑问，请随时联系客服。</p>
                    </div>
                    <el-icon class="safe-tip-close" size="20"><Close /></el-icon>
                </div>
            </div>
        </div>
        <div class="bs-panel-body">
            <div class="page-title bold">我的认证</div>
            <div class="safe-body">
                <div class="safe-item">
                    <div class="safe-label">个人认证：</div>
                    <div class="safe-value">
                        <span>13条记录</span>
                    </div>
                    <el-link type="primary" @click="certListHandle">查看</el-link>
                </div>
                <div class="safe-item">
                    <div class="safe-label">企业认证：</div>
                    <div class="safe-value">
                        <span>13条记录</span>
                    </div>
                    <el-link type="primary">查看</el-link>
                </div>
                <div class="safe-item">
                    <div class="safe-label">邮箱认证：</div>
                    <div class="safe-value">
                        <span>13条记录</span>
                    </div>
                    <el-link type="primary">查看</el-link>
                </div>
            </div>
        </div>
    </div>
    <!-- 认证列表 -->
    <CertiyList :isShow="isShowCertDialog" v-if="certShow" @updatePageShow="updatePageShow" @updateCertShow="updateCertShow"/>
    <!-- 登录日志 -->
    <LogList v-if="logShow" @updatePageShow="updatePageShow" @updateLogShow="updateLogShow"/>
    <!-- 账户邮箱 -->
    <EmailDialog :isShow="isShowEmailDialog" @close="closeEmailDialog"/>
    <!-- 绑定手机 -->
    <PhoneDialog :isShow="isShowPhoneDialog" @close="closePhoneDialog"/>
    <!-- 登录密码 -->
    <PasswordDialog :isShow="isShowDialog" @close="closeDialog"/>

</template>
<style scoped lang='scss'>
    .safe-tip-title img{
        width: 20px;
        margin-right: 10px;
    }
    .safe-body{
        position: relative;
        padding: 0 25px;
    }
    .bs-panel-body{
        position: relative;
        padding: 25px;
    }
    .bs-panel-body:first-child:before{
        content: '';
        position: absolute;
        bottom: 0px;
        left: 20px;
        right: 20px;
        height: 1px;
        background-color: #ddd;
    }
    .form-footer,
    .form-top{
        height: 32px;
        text-align: right;
    }
    .safe-item{
        width: 400px;
        display: flex;
        align-items: center;    
        margin-bottom: 20px;
    }
    .safe-item:last-child{
        margin-bottom: 0;
    }
    .safe-item .safe-label{
        width: 100px;
    }
    .safe-item .safe-value{
        flex: 1;
        color: #666;
    }
    .safe-tip-close{
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .safe-tip{
        position: absolute;
        right: 20px;
        top: 0;
        width: 500px;
        padding: 16px 24px;
        background-color: rgb(255, 251, 230);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(255, 229, 143);
        border-radius: 4px;
    }
    .safe-tip-title{
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        font-size: 16px;
    }
    .safe-tip-content p{
        color: #999;
        margin-bottom: 12px;
    }



</style>